<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-19 20:57:16
 * @LastEditors: charles
 * @LastEditTime: 2021-10-21 17:21:35
-->
<template>
  <div ref="root"></div>
</template>
<script>
import { Bar } from "@antv/g2plot";
import { Line } from "@antv/g2plot";
import { get } from "@/utils/request";
export default {
  data() {
    return {
      plot: null,
      data: [],
      arrVals: [],
      arrName: [],
      arrKeys : [],
      categoryList: [],
    };
  },
  async mounted() {
    await this.loadOrderStatus();
    this.initChart();
    // this.getMap();
  },
  beforeDestroy() {
    if (this.plot) {
      this.plot.destroy();
    }
  },
  methods: {
    async loadOrderStatus() {
      let res = await get("/productCategory/pageQuery", {
        page: 1,
        pageSize: 50,
      });
      let url = "/statistics/orderStatus";
      let resp = await get(url);
      let mpData = new Map();
      mpData = await this.getMap();

      for (let i of mpData.keys()) {
        this.arrKeys.push(i);
      }
      for (let i of mpData.values()) {
        this.arrVals.push(i);
      }

      this.categoryList = res.data.list

      // for(let i=0; i<res.data.data.list.length; i++){
      //   this.categoryList.push({
      //     id: res.data.data.list[i].id,
      //     name: res.data.data.list[i].name,
      //   })
      // };
     

     for (let i = 0; i < this.arrKeys.length; i++) {
       for(let j = 0; j < this.categoryList.length;j++){
          if(this.arrKeys[i] == this.categoryList[j].id){
             this.arrName.push(this.categoryList[j].name)
            break;
          }
       }
     }

      for (let i = 0; i < this.arrVals.length; i++) {
         
        let item = { year:  this.arrName[i], value: this.arrVals[i] };
        // let item = { year: this.arrKeys[i], value: this.arrVals[i] };
        this.data.push(item);
      }
      // for(let key in resp.data){
      //   let val = resp.data[key]
      //   console.log("key="+key+" val="+val);
      //   let item = {year:key,value:val}
      //   this.data.push(item)
      // }
    },

    async getMap() {
      let res = await get("/productCategory/pageQuery", {
        page: 1,
        pageSize: 50,
      });
      let mp = new Map();
      for (let i = 0; i < res.data.list.length; i++) {
        mp.set(res.data.list[i].id, 0);
      }
      let proRes = await get("/order/pageQuery", {
        page: 1,
        pageSize: 100,
      });
      for (let i = 0; i < proRes.data.list.length; i++) {
        for (let j = 0; j < proRes.data.list[i].orderLines.length; j++) {
          let proCategpryId =
            proRes.data.list[i].orderLines[j].product.productCategoryId;
          // console.log("i="+i+" j="+j+":"+proCategpryId + " mp=" + mp.get(proCategpryId));
          let val = mp.get(proCategpryId);
          val++;
          // console.log(val);
          mp.set(proCategpryId, val);
        }
      }
      console.log(mp);
      return mp;
    },

    initChart() {
      const data = this.data;
      let container = this.$refs.root;
      container.style.height = "180px";
      this.plot = new Bar(container, {
        data,
        xField: "value",
        yField: "year",
        seriesField: "year",
        legend: { position: "bottom" },
      });

      this.plot.render();
    },
  },
};
</script>